<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .color {
        color: red;
      }
    </style>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 模板内容 -->
    <!-- 
        在vue中有三种组件
        1.全局组件
            如何使用全局组件
            1.1 调用vue.extend()方法创建一个组件的构造器，该构造器有一个属性template（定义组件要渲染的html）
            1.2 使用 Vue.component()方法注册组件，需要提供两个参数：组件标签的名称和组件的构造器，内部会调用组件构造器并创建一个组件的实例
            1.3 要将组件挂载到某个vue的实例下面

            注意：一个组件的data选项一定是一个函数，该函数会返回一个对象
        2.局部组件
            可以使用选项对象的components属性实现局部的注册
            现在我们的组件构造器还是全局的，它不是真正意义上的局部组件。
        3.组件模板（常用的方式）

        父子组件：组件嵌套另外一个组件的时候
        在vue种，组件实例的作用域是独立的，默认的情况下，父子组件的数据不能共享，也就是说子组件不能直接访问父组件，
        但是在vue中给我们提供了一个数据传递的选项prop（可以将父组件的数据传递给子组件）

        注意:一个组件默认可以有任意数量的prop，这些prop可以用数据，也可以使用对象
        需要注意的是props中的prop列表 需要使用驼峰首字母小写往后每个单词首字母大写的命名规则

        也可以从父组件中获取子组件的数据：需要子组件通过emit主动将自己的数据发送给父组件 
    -->
    <div id="demo">
      <aaa></aaa>
    </div>
    <template id="aaa">
      <div>
        <h1>1111111</h1>
        <!-- 子组件 -->
        <bbb :m="msg" :my-msg="msg"></bbb>
      </div>
    </template>
    <script>
      // 局部组件
      var demo = new Vue({
        el: "#demo",
        data: {
          a: "aaa"
        },
        components: {
          'aaa': {
            data() {
              return {
                  msg:111,
                msg2: "我是父组件的数据"
              };
            },
            template: "#aaa",
            components: {
              'bbb': {
                props: {
                    'm':String,
                    'myMsg':Number
                },
                template: "<h1>我是bbb组件{{m}}<br>{{myMsg}}</h1>"
              }
            }
          }
        }
      });
    </script>
  </body>
</html>
